<template>
  <!-- 购物车 -->
  <div>
    <!-- top -->

    <div style="width: 1100px; margin-left: 180px; padding-top: 20px">
      <!-- 图标 -->
      <div style="">
        <img
          style="width: 140px; height: 50px"
          src="@/static/logo.png"
          alt=""
        />
      </div>

      <!-- 地址 -->
      <div>
        <div><h4>填写并核对订单信息</h4></div>

        <div style="border: 0.5px solid #ccc; padding-bottom: 20px">
          <div style="width: 1000px; padding-left: 50px">
            <div style="display: flex; justify-content: space-between">
              <h6>收件人信息</h6>
              <a href="/address"><h6>新增收获地址</h6></a>
            </div>

            <!-- 收件人 -->
            <div
              style="
                font-size: 12px;
                padding-left: 20px;
                border-bottom: 0.5px solid #ccc;
                padding-bottom: 20px;
              "
            >
              <a
                href="javascript:void(0)"
                style="
                  display: flex;
                  align-items: center;
                  gap: 20px;
                  padding-top: 10px;
                "
                v-for="(item, index) in addressData"
                :key="index"
                @click="selectAddress(index)"
              >
                <div
                  style="
                    width: 90px;
                    height: 30px;
                    border: 0.5px solid #ccc;
                    text-align: center;
                    line-height: 30px;
                  "
                >
                  <span>{{ item.name }}</span>
                </div>

                <div>{{ item.region }}{{ item.detail }}</div>
                <div>{{ item.phone }}</div>
                <div
                  v-if="item.isDefault === 1"
                  style="
                    background-color: #aaaaaa;
                    color: red;
                    height: 20px;
                    line-height: 20px;
                  "
                >
                  默认地址
                </div>
              </a>
            </div>

            <!-- 送货清单 -->
            <div style="border-bottom: 0.5px solid #ccc; padding-bottom: 20px">
              <h6>送货清单</h6>
              <!-- 清单内容 -->
              <div style="font-size: 12px">
                <div
                  v-for="(item, index) in cartData"
                  :key="index"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  "
                >
                  <div style="display: flex; gap: 10px; align-items: center">
                    <div class="left">
                      <img
                        style="width: 100px; height: 100px"
                        :src="item.url"
                        alt=""
                      />
                    </div>

                    <div class="center" style="width: 250px">
                      <span style="">{{ item.name }}</span>

                      <div v-for="(item1, index) in item.styles" :key="index">
                        <div style="padding-top: 5px; padding-bottom: 5px">
                          {{ item1.colors }} ：<span style="color: red">{{
                            item1.color
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="price">
                    <span style="color: red">￥358.00</span>
                  </div>

                  <div class="bujinqi">
                    <el-input-number
                      size="small"
                      v-model="num"
                      @change="handleChange"
                      :min="0"
                      label="数量"
                    ></el-input-number>
                  </div>

                  <div>有货</div>
                </div>
              </div>
            </div>

            <!-- 账单明细 -->
             <div style="display: flex;">
             <div></div>
            <div style="margin-left: auto; font-size: 12px; padding-top: 20px">
              <div  >
                <div style="display: flex;">
                  <span>2件商品,总金额：</span> <span style="margin-left:auto;">￥11119800.00</span>
                </div>
                <div style="display: flex;padding-top: 5px;padding-bottom: 5px;"><span>优惠券：</span> <span style="margin-left:auto;">￥0.00</span></div>
                <div style="display: flex;"><span>运费:</span> <span style="margin-left:auto;">￥0.00</span></div>
              </div>
            </div>

          </div>

         <!-- 应付金额 -->
          <div style="background-color: #f4f1f1;text-align: right;height: 40px;line-height: 40px;margin-top: 10px;">
             <span>应付金额:</span>
             <span style="color: red;">￥1356.00</span>
          </div>

          <!-- 结算按钮 -->

          <div style="text-align: right;margin-top: 20px;"> <el-button type="danger">提交订单</el-button></div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAddress, getAddressById } from '@/api/address'
export default {
  data () {
    return {
      num: 1,
      // 购物车数据
      cartData: [
        {
          url: require('@/static/home/floor-1-b01.png'),
          name: '[官方正品 品牌直营]奥古狮登小白鞋女秋季透气2018新款百搭版休闲鞋运动鞋女鞋后地板鞋女 浅蓝厚底 41',

          styles: [
            { colors: '颜色', color: '金色' },
            { colors: '尺寸', color: '41' }
          ],
          price: '336',
          number: 1,
          is_goods: 1
        },
        {
          url: require('@/static/home/floor-1-b01.png'),
          name: '[官方正品 品牌直营]奥古狮登小白鞋女秋季透气2018新款百搭版休闲鞋运动鞋女鞋后地板鞋女 浅蓝厚底 41',

          styles: [
            { colors: '颜色', color: '金色' },
            { colors: '尺寸', color: '41' }
          ],
          price: '336',
          number: 1,
          is_goods: 1
        },
        {
          url: require('@/static/home/floor-1-b01.png'),
          name: '[官方正品 品牌直营]奥古狮登小白鞋女秋季透气2018新款百搭版休闲鞋运动鞋女鞋后地板鞋女 浅蓝厚底 41',

          styles: [
            { colors: '颜色', color: '金色' },
            { colors: '尺寸', color: '41' }
          ],
          price: '336',
          number: 1,
          is_goods: 1
        }
      ],

      addressData: '' // 获取收货地址
    }
  },
  created () {
    this.getShipAddress()
  },
  methods: {
    async selectAddress (index) {
      console.log(index)
      const res = await getAddressById(this.addressData[index].id)
      this.addressData = res.data
      console.log(res)
    },
    // 获取收货地址
    async getShipAddress () {
      const res = await getAddress()
      this.addressData = res.data

      console.log(res)
    },
    // 计数器
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>
.ss{
  color:#f4f1f1 ;
}
</style>
